<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './components/MyTable.vue'
import type { Data } from '@/types/data';

const list = ref<Data[]>([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 },
])

const list2 = ref<Data[]>([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 },
])

const del = (id: number) => {
  list.value = list.value.filter((item: { id: number; }) => item.id !== id)
}

const show = (row: Data) => {
  // console.log(row);
  alert(`姓名：${row.name}; 年纪：${row.age}`)
}
</script>

<template>
  <MyTable :data="list">
    <!-- 3. 通过template #插槽名="变量名" 接收 -->
    <template #default="obj">
      <button @click="del(obj.row.id)">
        删除
      </button>
    </template>
  </MyTable>
  <MyTable :data="list2">
    <template #default="{ row }">
      <button @click="show(row)">查看</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>